/**
 * 点击车辆的时候出现弹框
 * @param props
 * @returns {*}
 * @constructor
 */
import {Avatar, Icon} from "antd";
import React from "react";

export const MapCarMessageDialog = (props) => {

    const {carData} = props;
    console.log("点击车辆传递的弹框的数据");
    console.log(carData);

    const featureArray = [
        {
            title: "充电状态",
            statusText: carData.onlineStatus === 0 || carData.chargingStatus === 0 ? '未充电' : '充电中'
        }, {
            title: "骑行状态",
            statusText: carData.stopStatus === 0 ? '未骑行' : '骑行中'
        }, {
            title: "温度检测",
            statusText: carData.temperatureStatus === 1 ? '正常' : carData.temperatureStatus === 2 ? '预警' : '异常'
        }, {
            title: "电压检测",
            statusText: carData.vbvStatus === 1 ? '正常' : '异常'
        }, {
            title: "电瓶防盗",
            statusText: carData.batteryBurglarEarlyAlarm === 1 ? '正常' : '异常'
        }, {
            title: "整车防盗",
            statusText: carData.carBurglarEarlyAlarm === 1 ? '正常' : '预警'
        }

    ];

    function changeShowTag() {

        props.changeTag(false);
    }


    function changeModalTag() {

        props.changeShowModalTag(false);
    }


    return (
        <div style={dialogRootWrapper}>
            <div style={dialogTitleWrapper}>
                &nbsp;&nbsp;终端号:{carData.tagSerial}
                <Icon type={"close-circle"} onClick={changeShowTag}
                      style={{position: "absolute", right: 10, top: "50%", transform: 'translateY(-50%)'}}/>
            </div>

            <div style={dialogBodyWrapper}>

                <div style={dialogUserWrapper}>
                    <Avatar icon={"user"} size={"large"} style={{
                        ...dialogUserFloatStyle, ...{
                            marginLeft: 12,
                            width: 62,
                            height: 62,
                            marginTop: 5
                        }
                    }}/>
                    <div style={{
                        ...dialogUserFloatStyle, ...{
                            paddingLeft: 5,
                            flex: 1,
                            display: "flex",
                            flexDirection: "column",
                            fontSize: 14
                        }
                    }}>
                        <div style={{flex: "1", lineHeight: "24px"}}>
                            <span>{carData.driverUserName}</span>
                            <span>{carData.plateNumber}</span>
                        </div>
                        <div style={{flex: "1", lineHeight: "24px"}}>
                            手机号:{carData.driverHandphone ? carData.driverHandphone : '未维护'}
                        </div>
                        <div style={{flex: "1", lineHeight: "24px"}}>车辆名字:{carData.carName}</div>
                    </div>
                    <div style={{...dialogUserFloatStyle, ...{color: "red", marginRight: 12,}}}>
                        <div style={dialogUserManagerStyle}>管理</div>
                        <div style={dialogUserLineStyle} onClick={changeModalTag}>曲线</div>
                    </div>
                </div>

                <div style={{flex: 1, display: "flex", flexWrap: "wrap", marginLeft: 10, paddingTop: 20}}>
                    {
                        featureArray.map((item, index) => {

                            return (
                                <div style={{width: 90, textAlign: "center"}} key={index}>
                                    <div style={{fontSize: 14,}}>{item.title}</div>
                                    <div style={{marginTop: 16, fontSize: 14,}}>{item.statusText}</div>
                                </div>
                            );
                        })
                    }
                </div>
            </div>
        </div>
    );
};

const dialogRootWrapper = {
    borderRadius: 6,
    height: 280,
    width: 290,
    margin: -10,

};

const dialogTitleWrapper = {
    backgroundColor: "#f5f5f5",
    height: 40,
    lineHeight: "40px",
    position: "relative",
    fontSize: 16,
};

const dialogBodyWrapper = {
    display: "flex",
    flexDirection: "column",
    height: 240
};


const dialogUserWrapper = {
    height: 72,
    marginTop: 16,
    display: "flex",

};

const dialogUserFloatStyle = {
    float: "left",
};


const dialogUserManagerStyle = {
    backgroundColor: "#80566bba",
    borderRadius: 4,
    border: "1px solid #cc566bba",
    color: "#566bba",
    height: 32,
    lineHeight: "32px",
    textAlign: "center",
    fontSize: 12,
    width: 46,
};

const dialogUserLineStyle = {
    backgroundColor: "#80f56c6c",
    width: 46,
    borderRadius: 4,
    border: "1px solid #ccf56c6c",
    color: "#f56c6c",
    height: 32,
    lineHeight: "32px",
    marginTop: 10,
    textAlign: "center",
    fontSize: 12,
};